<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .flex-box{
            display: flex;
            flex-wrap: nowrap;
        }
        .clearfix:after{
            content: "";
            clear: both;
            display: block;
        }
        .all-box{
            width: 100%;
            background: #22211F;
        }
        .all-box .top p{
            padding-top: 15%;
            padding-right: 3%;
            text-align: right;
            color: #C7C7C5;
        }
        .all-box .top p{
            padding-top: 15%;
            padding-right: 3%;
            text-align: right;
            color: #C7C7C5;
        }
        .all-box .top #dl{
            height: 20%;
            margin-top: 26px;
            font-size: 80px;
            color: white;
            text-align: right;
        }
        .top{
            height: 30%;
        }




        .buttom{
            height: 70%;
            background: #44423E;
        }
        .buttom .hang1,.hang2,.hang3,.hang4,.lasthang{
            color: #C7C7C5;
            text-align: center;
            font-size: 40px;
        }
        .fl{
            float: left;
        }
        .buttom .hangbox{
            width:24%;
            padding: 26px 0.7px;
            border: 1px solid #575652;

        }
        .buttom .denghao{
            padding: 21% 1px;
            background: #2C9195;
        }
        .zero-box{
            width: 50%;
            padding: 25px 42px;
            margin-top: -106px;
            border: 1px solid #575652;
        }
        .dian{
            margin-left:92%;
            padding: 26px 41px;
            margin-top: -106px;
            border: 1px solid #575652;
        }



    </style>
</head>
<body>


<div class="all-box">
    <div class="top">
        <p>M</p>
        <div id="dl">0</div>
    </div>
    <div class="buttom">
        <div class="hang1 flex-box">
            <div class="hangbox" onclick="qingchu()"> <div class="dl1">C</div>
            </div>
            <div class="hangbox" onclick="chufa()"><div class="dl1">÷</div>
            </div>
            <div class="hangbox" onclick="chengfa()"><div class="dl1">×</div>
            </div>
            <div class="hangbox" onclick="shanchu()"><div class="dl1">A</div>
            </div>
        </div>

        <div class="hang2 flex-box">
            <div class="hangbox" onclick="show(7)" > <div class="dl1">7</div>
            </div>
            <div class="hangbox" onclick="show(8)" ><div class="dl1">8</div>
            </div>
            <div class="hangbox" onclick="show(9)" ><div class="dl1">9</div>
            </div>
            <div class="hangbox" onclick="jianfa()"><div class="dl1">－</div>
            </div>
        </div>

        <div class="hang3 clearfix">
            <div class="hangbox fl" onclick="show(4)"> <div class="dl1">4</div>
            </div>
            <div class="hangbox fl" onclick="show(5)"><div class="dl1" >5</div>
            </div>
            <div class="hangbox fl" onclick="show(6)"><div class="dl1">6</div>
            </div>
            <div class="hangbox fl" onclick="jiafa()"><div class="dl1">＋</div>
            </div>
        </div>

        <div class="hang4 clearfix">
            <div class="hangbox fl" onclick="show(1)"> <div class="dl1">1</div>
            </div>
            <div class="hangbox fl" onclick="show(2)"><div class="dl1">2</div>
            </div>
            <div class="hangbox fl" onclick="show(3)"><div class="dl1">3</div>
            </div>
            <div class="hangbox fl denghao" onclick="dengyu()"><div class="dl1">=</div>
            </div>
        </div>
        <div class="fl lasthang clearfix">
            <div class=" fl zero-box " onclick="show(0)"> <div class=" zero" class="dl1">0</div>
            </div>
            <div class=" fl dian" onclick="show()"><div class="dl1">.</div>
            </div>
        </div>
    </div>
</div>


<script>
    var num1;
    var num2;
    var ysf;

    function show(x) {
        if(dl.innerHTML =="0"){
            dl.innerHTML = x;
        }else{
            dl.innerHTML = dl.innerHTML + x;
        }
    }


    function qingchu() {
        dl.innerHTML = "&nbsp";
    }
    function shanchu() {
        dl.innerHTML.length=dl.innerHTML.length-1;
    }
    function jiafa(){
        num1 = parseInt(dl.innerHTML);
        dl.innerHTML = "&nbsp";
        ysf = "+";
    }
    function jianfa(){
        num1 = parseInt(dl.innerHTML);
        dl.innerHTML = "&nbsp";
        ysf = "-";
    }
    function chengfa(){
        num1 = parseInt(dl.innerHTML);
        dl.innerHTML = "&nbsp";
        ysf = "*";
    }
    function chufa(){
        num1 = parseInt(dl.innerHTML);
        dl.innerHTML = "&nbsp";
        ysf = "/";
    }
    function dengyu() {
        num2 = parseInt(dl.innerHTML);

        if (ysf=="+"){
            dl.innerHTML = num1+num2;
        }else if (ysf=="-") {
            dl.innerHTML = num1-num2;
        }else if (ysf=="*") {
            dl.innerHTML = num1*num2;
        }else{
            dl.innerHTML = num1/num2;
        }
    }



</script>
</body>
</html>